<template>
	<view class="login-page">
		<view class="back">
			<uni-nav-bar color="#999" leftIcon="left" backgroundColor="transparent" :border="false" :statusBar="true"
				:fixed="false" @clickLeft="$common.back()"></uni-nav-bar>

		</view>
		<view class="top">
			<view class="text">
				<view class="sys-title">{{sysConfig.site_title}}</view>
				<view class="text-content">欢迎登录~快来领取您的专属好礼吧</view>
			</view>

			<view @click="login()" class="biaodan">

				<view class="btn">微信授权登录</view>
			</view>
		</view>

		<view class="agree-box">
			<u-checkbox @change="checkboxChange" v-model="agreeChecked" shape="circle">
			</u-checkbox>
			<view class="agree-box-text">
				注册或登录即表示已阅读并同意
				<text class="book-style" @click="$.to('/pages/my/agreement?type=user_agreement')">《用户协议》</text>，
				<text class="book-style" @click="$.to('/pages/my/agreement?type=privacy_policy')">《隐私协议》</text>
			</view>
		</view>


		<u-popup mode="center" :popup="false" v-model="anShow" border-radius="20">
			<view class="popup-view">
				<view class="popup-view-title">您好，首次注册需要设置用户头像、昵称</view>
				<view class="">
					<view class="cell-list">
						<text class="cell-list-left">用户头像</text>
						<view class="cell-list-right right-pic">
							<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="refreshIcon" :src="headImg" alt="点击上传头像"></image>
							</button>
						</view>

					</view>
					<view class="cell-list">
						<text class="cell-list-left">用户昵称</text>
						<view class="cell-list-right">
							<input class="weui-input" type="nickname" v-model="nickName" placeholder="请输入昵称"
								@blur="bindblur" />
						</view>

					</view>
				</view>

				<view class="btn1">
					<view class="btn-sub" @click="reg()">保存用户信息</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				headImg: 'https://ypay.hui-xiang.cn/uploads/other/avatar3.png',
				nickName: '默认微信用户',
				agreeChecked: false,
				anShow: true,
				appid: '',
				optionsData: '',
				formData: {
					loginCode: '',
					mobileCode: ''
				},
				showReg: false,
				sysConfig: '',
				code: '',
			}
		},
		computed: {
			...mapGetters(['appConfig'])
		},
		onLoad(options) {

			this.optionsData = options
			if (options.headimgurl) {
				this.headImg = options.headimgurl
			}
			if (options.nickname) {
				this.nickName = options.nickname
			}
			if (options.invite_code) {
				uni.setStorage({
					key: 'invite_code',
					data: options.invite_code
				});
			}
			this.login(false)
			this.$store.dispatch('getAppConfig').then((res) => {
				this.sysConfig = res.data;
			})
		},
		methods: {
			uploadImage(tempFilePaths) {
				console.log(this.siteBaseUrl);
				let _this = this;
				uni.uploadFile({
					url: this.siteBaseUrl + '/v1/upload/image', //接口地址
					filePath: tempFilePaths,
					name: 'image',
					success: (res) => {
						let data = JSON.parse(res.data);
						console.log(data, 'image');
						this.headImg = data.data
						uni.hideLoading();
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl // 此处是头像的临时路径
				console.log(e);
				// 需要后端配合，获得线上的地址
				this.uploadImage(avatarUrl);
			},
			bindblur(e) {
				this.nickName = e.detail.value; // 获取微信昵称
			},
			checkboxChange() {
				this.agreeChecked = true;
			},
			/**
			 * @description: 统一处理登录后页面跳转传参
			 * @param {*}
			 * @return {*}
			 */
			pageTo() {
				this.$store.dispatch('getUserInfo').then(() => {
					let pages = getCurrentPages()

					let data = ''
					if (this.optionsData) {
						let query = this.optionsData
						if (this.optionsData.page == 'package/fuli/fuli-detail') {
							query.is_new = 1
						}
						data = query
					}
					/* 小程序码进入 */
					if (this.optionsData.scene) {
						let query = {}
						let arr = this.optionsData.scene.split('_')
						/**
						 * 小程序码参数为 1_1_1 格式 参数间通过_分隔
						 * 参数1为类型,之后参数为与后台约定的参数
						 * 类型:
						 * 1 幸运盒子 参数1为分享人id,参数2为盒子id
						 * 未完待续...
						 */
						if (arr[0] == 1) {
							query.userId = arr[1]
							query.id = arr[2]
						}
						data = query
					}

					uni.redirectTo({
						url: `${this.optionsData.page}${this.$common.qs(this.optionsData)}`,
						fail: err => {
							console.log('跳转失败--', this.optionsData.page)
							uni.switchTab({
								url: `${this.optionsData.page}`
							})
						}
					})
				})
			},

			/**
			 * @description: 清除注册信息
			 * @param {*}
			 * @return {*}
			 */
			clearForm() {
				this.formData = this.$options.data().formData
				console.log('clearOk')
			},

			/**
			 * @description: 用户注册
			 * @param {*}
			 * @return {*}
			 */
			async reg(e) {

				let data = {}
				// console.log(uni.getStorageSync('invite_code', ''));
				// return
				data.loginCode = uni.getStorageSync('loginCode');
				data.nickName = this.nickName;
				data.avatarUrl = this.headImg;
				data.invite_code = uni.getStorageSync('invite_code') 
				// data.invite_code = uni.getStorageSync('invite_code', '');
				/* 小程序码进入 */
				this.req({
					url: '/v1/user/register',
					data,
					success: res => {
						console.log(res)
						if (res.code == 200) {
							uni.setStorageSync(
								'token',
								`${res.data.token_type}${res.data.access_token}`
							)

							uni.showToast({
								title: '登录成功',
								icon: 'success',
								mask: true
							})

							uni.switchTab({
								url: '/pages/mine/mine'
							})
							// window.location.href = '#/pages/mine/mine';

						}
					}
				})

			},

			/**
			 * @description: 获取注册信息
			 * @param {*}
			 * @return {*}
			 */
			getInfo(e) {
				/* 获取登录code */
				if (this.formData.loginCode === '') {
					this.$common.wxMpLogin().then(res => {
						this.formData.loginCode = res.code
						this.reg('login')
					})
				}

				/* 获取手机号code */
				if (this.formData.mobileCode === '') {
					console.log(e)
					if (e.type == 'getphonenumber') {
						this.formData.mobileCode = e.detail.code
						this.reg('phone')
					}
				}
			},

			/**
			 * @description:
			 * @param {*}
			 * @return {*}
			 */
			async login(flag = true) {
				if (flag && !this.agreeChecked) {
					uni.showToast({
						title: '请先同意协议',
						icon: 'error',
						mask: true
					})
					return
				}
				let data = await this.$common.wxMpLogin()
				uni.setStorageSync('loginCode', data.code)
				if (!flag) {
					this.req({
						url: '/v1/user/register ',
						data: {

						},
						success: res => {
							if (res.code == 200) {
								uni.setStorageSync(
									'token',
									`${res.data.token_type}${res.data.access_token}`
								)
								setTimeout(() => {
									uni.showToast({
										title: '登录成功',
										icon: 'success',
										mask: true
									})
								}, 100)
								window.location.href = '#/pages/mine/mine';

							} else if (res.code == 1001) {
								this.code = data.code
								this.anShow = true
								uni.showToast({
									title: '请点击授权登录',
									icon: 'none'
								})
								this.reg(options.openid)
							}
						}
					})
					return
				}
				console.log(data, this.$common);




			}
		}
	}
</script>

<style lang="scss">
	.login-page {
		width: 100%;
		height: 100vh;
		background-image: url("https://img.50api.cn/vx.tongbayun.v3/loginbg.jpg");
		background-size: 100% 100%;
		position: relative;
	}

	.top {
		position: absolute;
		top: 300rpx;

		.sys-title {
			font-size: 70rpx;
			font-weight: bold;
			color: #3643bd;
			padding-left: 50rpx;
		}

		.text-content {
			font-size: 30rpx;
			font-weight: bolder;
			color: #3643bd;
			padding-left: 50rpx;
			margin-top: 40rpx;
		}

		.biaodan {
			margin-top: 300rpx;
			width: 650rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #3643bd;
			color: #fff;
			font-size: 32rpx;
			margin-left: 50rpx;
			border-radius: 30rpx;
		}
	}


	.agree-box {
		position: absolute;
		bottom: 100rpx;
		width: 650rpx;
		margin-left: 50rpx;
		display: flex;

		.agree-box-text {
			color: #222;
			font-size: 24rpx;
			line-height: 36rpx;
		}

		.book-style {
			color: #3643bd;
			font-size: 24rpx;
			line-height: 36rpx;

		}
	}

	.phonesanniu {
		width: 640rpx;
		height: 700rpx;
		border-radius: 20rpx;
		border: 1rpx solid #000;
		background-color: #ccc;
		background-size: 100% 100%;
		top: 100rpx;
		left: 60rpx;
		position: relative;

		.topshanguin {
			width: 100%;
			height: 25%;
			display: flex;
			align-items: center;
			justify-content: center;

			.imgs {
				font-size: 40rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.containar {
			width: 100%;
			height: 75%;

			.avatarUrl {
				padding: 30rpx 0 40rpx;
				background: #fff;

				button {
					background: #fff;
					line-height: 80rpx;
					height: auto;
					width: auto;
					padding: 20rpx 30rpx;
					border: 1rpx solid #f1f1f1;
					margin: 0;
					display: flex;
					justify-content: center;
					align-items: center;

					.avatar {
						height: 100rpx;
						width: 100rpx;
					}

					.refreshIcon {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}

					.jt {
						width: 14rpx;
						height: 28rpx;
					}
				}
			}

			.nickname {
				background: #fff;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				border: 1rpx solid #f1f1f1;

				.weui-input {
					margin: auto;
					padding-left: -10rpx;

				}
			}

			.btn1 {
				width: 100%;
				margin-top: 10rpx;

				.btn-sub {
					width: 468rpx;
					margin: auto;
					height: 100rpx;
					border-radius: 25rpx;
					font-size: 40rpx;
					color: #ffffff;
					line-height: 100rpx;
					text-align: center;
					font-size: 36rpx;
					background-color: #01d9d8;
				}

				.btn-tg {
					padding-top: 15rpx;
					width: 468rpx;
					margin: auto;
					text-align: center;
				}
			}
		}
	}


	.popup-view {
		width: 600rpx;
		height: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 50rpx 0;
		box-sizing: border-box;

		.popup-view-title {
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #222;
		}

		.cell-list {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			width: 500rpx;
			margin-left: 50rpx;

			// padding: 20rpx 0;
			&-left {
				width: 160rpx;
				flex-shrink: 0;
			}

			.refreshIcon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.right-pic {

				button {
					background-color: #ffffff;
					width: 120rpx;
					height: 120rpx;
					padding: 0;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				button::after {
					border: none;
				}
			}
		}

		.btn1 {
			margin-top: 60rpx;

			.btn-sub {
				width: 500rpx;
				background-color: #3643bd;
				height: 80rpx;
				color: #fff;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
			}
		}
	}
</style>